<template>
  <div id="MV">
    <Mvitem :mvList="newMv" :title="'最新MV'" />
    <Mvitem :mvList="exclusiveMV" :title="'网易出品'" />
  </div>
</template>

<script>
import Mvitem from './components/Mvitem.vue'
import { getExclusiveMv, getNewMv } from '@/api/mv.js'
import { Toast } from 'vant'
export default {
  name: 'MV',
  data () {
    return {
      exclusiveMV: [], // 网易mv
      newMv: [] // 最新mv
    }
  },
  components: {
    Mvitem
  },
  created () {
    this.loadMvList()
  },
  // 定义方法
  methods: {
    async loadMvList () {
      try {
        // 获取网易mv
        const { data: exclusive } = await getExclusiveMv({ limit: 6 })
        this.exclusiveMV = exclusive.map(item => {
          item.cover = item.picUrl
          return item
        })

        // 获取最新mv
        const { data: newRes } = await getNewMv({ limit: 10 })
        this.newMv = newRes
      } catch (err) {
        Toast('网络不佳！')
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
